<template>
  <header class="top-nav">
    <div class="left-container">
      <div class="logo">
        <img src="../assets/logo.jpg" alt="系统Logo" class="logo-img">
      </div>
      <nav class="main-nav">
        <router-link to="/overview" class="nav-item">总览</router-link>
        <router-link to="/content-center" class="nav-item">内容中心</router-link>
        <router-link to="/task-list" class="nav-item">工作流程 ▼</router-link>
        <router-link to="/app-center" class="nav-item">应用中心</router-link>
      </nav>
    </div>
    <div class="user-area">
      <span class="username">管理员</span>
      <i class="el-icon-user"></i>
    </div>
  </header>
</template>

<script setup>

</script>

<style scoped>
.top-nav {
  display: flex;
  justify-content: space-between; /* 左右两部分分开 */
  align-items: center;
  height: 60px;
  background-color: #1f202d; 
  color: #fff;
  padding: 0 20px;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden; 
}

.left-container {
  display: flex;
  align-items: center;
  gap: 20px; 
}

.logo-img {
  height: 40px;
  width: auto;
  object-fit: contain;
  display: block;
}

.main-nav {
  display: flex;
  gap: 25px; 
  padding: 0;
  margin: 0;
}

.nav-item {
  color: #fff; 
  text-decoration: none;
  transition: color 0.2s;
  white-space: nowrap; 
  padding: 5px 0;
}

.nav-item:hover,
.nav-item.router-link-exact-active {
  color: #f0f0f0;
  font-weight: 500;
}

.user-area {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto; 
  white-space: nowrap;
}


@media (max-width: 768px) {
  .left-container {
    gap: 10px;
  }
  
  .main-nav {
    gap: 15px;
  }
  
  .nav-item {
    font-size: 14px;
  }
}
</style>
